<template>
  <div style="margin-top:30px">
    <el-form ref="form" :rules="rules" :model="form" label-width="100px" :disabled="true">

      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="可编辑类型" prop="editType" style="margin-right:15px">
              <el-select v-model="form.editType" placeholder="请选择" clearable>
                <el-option v-for="item in editTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="配置类型" prop="type" style="margin-right:15px">
              <el-input v-model="form.type" placeholder="请输入配置类型" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="配置的key" prop="configKey" style="margin-right:15px">
              <el-input v-model="form.configKey" placeholder="请输入配置的key" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="配置的value" prop="configValue" style="margin-right:15px">
              <el-input type="textarea" :rows="5" v-model="form.configValue" placeholder="请输入配置的value" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="配置描述" prop="configDesc" style="margin-right:15px">
              <el-input v-model="form.configDesc" placeholder="请输入配置描述" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
    import Vue from 'vue'
    import 'xe-utils'
    import VXETable from 'vxe-table'
    import 'vxe-table/lib/index.css'
    import request from '@/utils/request'
    Vue.use(VXETable)
    export default {
        name: 'partyGroupConfigAdd',
        data() {
            return {
                emptyForm:{},
                form: {
                    editType: '',
                    type: '',
                    configKey: '',
                    configValue: '',
                    configDesc: '',
                },
                // 字段类型
                editTypeOptions: [
                    { label: '客户', value: 'custom'},
                    { label: '中台', value: 'platform'}
                ],
                rules: {
                    editType: [
                        { required: true, message: '请选择可编辑类型', trigger: 'blur' }
                    ],
                    type: [
                        { required: true, message: '请输入配置类型', trigger: 'blur' },
                        
                    ],
                    configKey: [
                        { required: true, message: '请输入配置的key', trigger: 'blur' },
                        
                    ],
                    configValue: [
                        { required: true, message: '请输入配置的value', trigger: 'blur' },
                        
                    ],
                    configDesc: [
                        { required: true, message: '请输入配置描述', trigger: 'blur' },
                        
                    ],
                }
            }
        },
        created() {
            //保存空表单对象
            this.emptyForm =JSON.parse(JSON.stringify(this.form))
        },
        methods: {
            // 获取页面信息
            getInfo(code) {
                //查询到数据之前先展示空表单
                this.form=JSON.parse(JSON.stringify(this.emptyForm))
                request({ url: `/arpa-basic-api/partyGroupConfig/${code}`, method: 'get' }).then(response => {
                    this.form = response.data
                })
            },
            //取消
            funcCancel() {
                this.$emit('fatherCancelMethod','edit')
            }
        }
    }
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin:15px 0 15px 0;
    width: 175px;
    float: right;
  }
  .el-select {
    width: 100%;
  }
  .el-date-editor{
    width: 100%;
  }
</style>

